define(["config/appregister",'jquery',"canvasCrop"],function(app){
   app.directive('cutPicture',function(){
       return {
           scope:{
               imgUrl:"=picSrc",
               isCircle:"=setCircle",
               size:"=circleSize"
           },
           templateUrl:"app/business/services/comComponents/catPicture.html",
           link:function(scope,elements,attrs){
               scope.modifyPicture = false;
               if(typeof scope.size =="number") {
                   scope.circleSize = scope.size ;
               }else {
                   scope.circleSize = 80 ;
               }
               scope.setRadius = function(value){
                   if(toString.call(value)!="[object Number]")
                   return ;
                   return {"border-radius":value + "px",width:2*value+"px",height:2*value +"px"}
               };
              scope.btnStyle = {
                  width:2*scope.circleSize+"px"
              };

               scope.modifyBtn = function(){
                   scope.modifyPicture = true
               };
               var rot = 0,ratio = 1;
               var CanvasCrop = $.CanvasCrop({
                   cropBox : ".imageBox",
                   imgSrc : "./images/avatar.jpg",
                   limitOver : 2
               });


               $('#upload-file').on('change', function(){
                   var reader = new FileReader();
                   reader.onload = function(e) {
                       CanvasCrop = $.CanvasCrop({
                           cropBox : ".imageBox",
                           imgSrc : e.target.result,
                           limitOver : 2
                       });
                       rot =0 ;
                       ratio = 1;
                   }
                   reader.readAsDataURL(this.files[0]);
                  // this.files = [];
               });

               $("#rotateLeft").on("click",function(){
                   rot -= 90;
                   rot = rot<0?270:rot;
                   CanvasCrop.rotate(rot);
               });
               $("#rotateRight").on("click",function(){
                   rot += 90;
                   rot = rot>360?90:rot;
                   CanvasCrop.rotate(rot);
               });
               $("#changMin").on("click",function(){
                   ratio =ratio*0.9;
                   CanvasCrop.scale(ratio);
               });
               $("#changLarge").on("click",function(){
                   ratio =ratio*1.1;
                   CanvasCrop.scale(ratio);
               });
               $("#alertInfo").on("click",function(){
//          alert("角度:"+rot+"\n横坐标:"+argument.x+"\n纵坐标:"+argument.y);
                   var canvas = document.getElementById("visbleCanvas");
                   var context = canvas.getContext("2d");
                   context.clearRect(0,0,canvas.width,canvas.height);
               });

               $("#crop").on("click",function(){
                   var src = CanvasCrop.getDataURL("jpeg");
                   scope.$apply(function(){
                       scope.imgUrl = src;
                       scope.modifyPicture = false;
                       scope.$emit('imgUrl',src);
                   })

                 //  $(".modifiedPictureBox").append("<img src='"+src+"' />");
               });

              // console.log("ontouchend" in document);
           }
       }
   })

});